<template>
  <div class="question-type">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="技能标题" prop="title">
        <el-input
          v-model="queryParams.title"
          placeholder="请输入标题"
          clearable
          size="small"
          style="width: 180px"
        />
      </el-form-item>
<!--      <el-form-item label="试题类型" prop="type">-->
<!--        <el-select v-model="queryParams.type" size="small" placeholder="请选择">-->
<!--          <el-option-->
<!--            v-for="item in options"-->
<!--            :key="item.dictValue"-->
<!--            :label="item.dictLabel"-->
<!--            :value="item.dictValue">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
        >重置</el-button
        >
      </el-form-item>
    </el-form>

    <!--     表格-->
    <el-table
      :data="dateList"
      row-key="id"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column label="序号" align="center" prop="id" width="80"/>
      <el-table-column
        label="用户姓名"
        align="center"
        prop="userName"
      />
      <el-table-column
        label="用户手机号"
        align="center"
        prop="userPhone"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="学习技能标题"
        align="center"
        prop="title"
        :show-overflow-tooltip="true"
      >
      </el-table-column>

      <el-table-column
        label="是否学习"
        align="center"
        prop="answer"
      >
        <template slot-scope="scope">
          {{scope.row.studyStatus === 1 ? '已学习' : '未学习'}}
        </template>
      </el-table-column>
      <el-table-column
        label="是否答题"
        align="center"
        prop="score"
      > <template slot-scope="scope">
        {{scope.row.answerStatus === 1 ? '已答题' : '未答题'}}
      </template>
      </el-table-column>
      <el-table-column label="创建时间"  align="center" prop="createTime" width="150"/>
      <el-table-column label="修改时间" align="center" prop="modifyTime" width="150"/>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />


  </div>
</template>


<script>

export default {
  name: "index",
  data() {
    return {
      total:0,
      dateList:[],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title:undefined
      },
    }
  },
  created() {
    this.getList();
  },
  methods: {
    handleQuery() {//收索按钮

      this.getList();
    },
    getList(){
      pageList(this.queryParams).then(response =>{
        this.dateList = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      })
    },
    //重置按钮
    resetQuery(){
      this.queryParams.pageNum = 1;
      this.queryParams.title = ''
      this.handleQuery();
    },
  }
}
</script>


<style scoped>
.question-type{
  padding: 20px;
}
</style>
